import { saveSynchrony } from '@/services/api/api-datahub-synchrony';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, DrawerForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef } from 'react';

interface AddSynchronyrProps {
  onRefurbish: () => void;
}

const AddSynchrony: React.FC<AddSynchronyrProps> = ({ onRefurbish }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  return (
    <DrawerForm
      title="添加数据源"
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={
        <Button type="primary">
          <PlusOutlined />
          添加数据源
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 550,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const response = await saveSynchrony({ ...values });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProFormText
        name="name"
        label="任务描述"
        placeholder="请输入"
        rules={[{ required: true, message: '请输入任务描述' }]}
      />
      <ProFormTextArea
        name="factoryConfig"
        label="任务参数"
        placeholder="请输入"
        tooltip="参数类型请使用json格式"
        rules={[{ required: true, message: '请输入任务参数' }]}
        fieldProps={{
          rows: 10,
        }}
        extra={
          <a href="https://www.bejson.com/" target="_blank">
            JSON格式化
          </a>
        }
      />
      <ProFormText
        name="cron"
        label="Cron"
        placeholder="请输入"
        rules={[{ required: true, message: '请输入Cron' }]}
        extra={
          <a href="https://cron.qqe2.com/" target="_blank">
            在线生成Cron
          </a>
        }
      />
    </DrawerForm>
  );
};
export default AddSynchrony;
